<template>
  <view class="product-page">
    <!-- 顶部公司信息 -->
    <view class="company-info">
      <view class="brand-name">{{ brandObj.brand_name }}</view>
    </view>

    <!-- 商品列表 -->
    <scroll-view
      class="product-grid"
      scroll-y
      @scrolltolower="loadMore"
      style="height: calc(85vh - 104rpx)"
    >
      <view class="product-grid">
        <view
          class="product-item"
          v-for="(goods, index) in goodsList"
          :key="index"
          @click="toGoodsDetail(goods.id)"
        >
          <image
            class="product-image"
            :src="goods.goods_image"
            mode="fill"
          ></image>
          <view class="product-title">{{ goods.product_name }}</view>
        </view>
      </view>
    </scroll-view>
    <view class="empty-order" v-if="goodsList.length === 0">
      <gui-image
        src="https://cphimg.leyoo888.com/dev/carry_upload/supplier/2025-06-11/1749606259704.png?x-oss-process=image/resize,w_200,h_200"
      />
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getAllBrandGoods } from "@/api/brandView";
import { showToast } from "@/utils/helper";
// 商品列表数据
const goodsList = ref([]);
const query = ref({
  page: 1,
  limit: 99,
});
//通过品牌获取商品
const getGoodsListData = async (type = "init") => {
  const res = await getAllBrandGoods({
    brand_id: brandObj.value.id,
    type: 2,
    all_system: 1,
    ...query.value,
  });
  if (res.data.length === 0) return showToast("没有更多数据了");
  if (type === "init") return (goodsList.value = res.data);
  goodsList.value = [...goodsList.value, ...res.data];
};

const toGoodsDetail = (id) => {
  uni.navigateTo({
    url: `/pages/brandView/brandGoodsDetail?id=${id}`,
  });
};
const brandObj = ref({
  id: undefined,
  brand_name: undefined,
});

const loadMore = () => {
  query.value.page++;
  getGoodsListData("more");
};
onLoad(async (options) => {
  brandObj.value = {
    id: options.id,
    brand_name: options.brand_name,
  };
  await getGoodsListData(brandObj.value.id);
});
</script>

<style lang="scss" scoped>
.product-page {
  min-height: 87vh;
  padding-bottom: 180rpx; // 为底部固定区域留出空间

  // 顶部公司信息
  .company-info {
    padding: 30rpx 20rpx;
    background-color: #fff;
    margin-bottom: 20rpx;

    .company-name {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      text-align: center;
      margin-bottom: 10rpx;
    }

    .brand-name {
      font-size: 28rpx;
      color: #f00;
      text-align: center;
    }
  }

  // 商品列表
  .product-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10rpx;

    .product-item {
      width: calc(100% / 3);
      padding: 10rpx;
      box-sizing: border-box;
      margin-bottom: 20rpx;

      .product-image {
        width: 100%;
        height: 240rpx;
        border-radius: 8rpx;
        background-color: #fff;
      }

      .product-title {
        margin-top: 10rpx;
        font-size: 28rpx;
        color: #333;
        text-align: center;
      }
    }
  }

  // 底部固定店铺信息
  .shop-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 20rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
    z-index: 10;

    .shop-info {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .shop-logo {
        width: 160rpx;
        height: 160rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }

      .shop-detail {
        flex: 1;
        align-self: flex-start;

        .shop-name {
          font-size: 30rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 6rpx;
        }

        .shop-address {
          font-size: 24rpx;
          color: #999;
        }
      }
    }

    .shop-actions {
      display: flex;
      justify-content: space-between;
      margin: 10rpx 20rpx 0 0;

      .action-btn {
        flex: 1;
        height: 70rpx;
        line-height: 70rpx;
        text-align: center;
        border-radius: 35rpx;
        font-size: 26rpx;
        margin: 0 10rpx;

        &.contact-btn {
          background-color: #f0f0f0;
          color: #333;
        }

        &.order-btn {
          background-color: #ff6b6b;
          color: #fff;
        }

        &.switch-btn {
          background-color: #2196f3;
          color: #fff;
        }
      }
    }
  }

  // 店铺切换弹窗
  .shop-list-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;

    .popup-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
    }

    .popup-content {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #fff;
      border-radius: 20rpx 20rpx 0 0;
      padding: 30rpx 20rpx;
      max-height: 70vh;
      overflow-y: auto;

      .shop-list-item {
        display: flex;
        align-items: center;
        padding: 20rpx;
        width: 90%;
        border-bottom: 1px solid #f0f0f0;

        .shop-list-info {
          display: flex;
          align-items: center;
          flex: 1;

          .shop-list-logo {
            width: 80rpx;
            height: 80rpx;
            border-radius: 8rpx;
            margin-right: 20rpx;
          }

          .shop-list-detail {
            flex: 1;

            .shop-list-name {
              font-size: 28rpx;
              color: #333;
              margin-bottom: 6rpx;
            }

            .shop-list-address {
              font-size: 24rpx;
              color: #999;
            }
          }
        }

        .shop-distance {
          font-size: 24rpx;
          color: #999;
          margin-right: 20rpx;
        }

        .switch-shop-btn {
          width: 100rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          background-color: #f0f0f0;
          color: #333;
          font-size: 24rpx;
          border-radius: 30rpx;
        }
      }
    }
  }
}
.empty-order {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  flex-direction: column;
}
</style>
